<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/js/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>创建简单树形菜单</p>
    <ul class="easyui-tree">
        <li>
            <span>Folder</span>
            <ul>
                <li>
                    <span>Sub Folder 1</span>
                    <ul>
                        <li><span>File 11</span></li>
                        <li><span>File 12</span></li>
                        <li><span>File 13</span></li>
                    </ul>
                </li>
                <li><span>File 2</span></li>
                <li><span>File 3</span></li>
            </ul>
        </li>
        <li><span>File21</span></li>
    </ul>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>创建异步树形菜单</p>
    <ul id="tt"></ul>
    <script>
        $(function () {
            $('#tt').tree({
                url: '/menu/list?parentId=1',
                onBeforeExpand: function (row) {
                    if ("closed" == row.state && !row.children) {
                        return false;
                    }
                },
                onClick: function (row) {
                    resetNode(row);
                }
            });
        });
        function resetNode(row) {
            if ("closed" === row.state && !row.children) {
                $.ajax({
                    url: "/menu/list",
                    data: {
                        "parentId": row.id
                    },
                    dataType: 'json',
                    success: function (data) {
                        var rows = data[0].children;
                        if (rows && rows.length > 0) {
                            $('#tt').tree("append", {
                                parent: row.target,
                                data: rows
                            });
                            row.state = 'open';
                        } else {
                            row.state = 'open';
                        }
                        $('#tt').tree("expand", row.target);
                    }
                });
                return;
            }
            if ("closed" === row.state && row.children) {
                row.state = 'open';
                $('#tt').tree("collapse", row.target);
                $('#tt').tree("expand", row.target);
                return;
            }
            row.state = 'closed';
            $('#tt').tree("collapse", row.target);
        }
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>创建带复选框的树形菜单</p>
    <ul id="tt2" class="easyui-tree" url="/menu/list?parentId=1" checkbox="true"></ul>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>创建复杂树形网格</p>
    <table id="tt3" title="Complex TreeGrid" class="easyui-treegrid" style="width:650px;height:250px"
           rownumbers="true" showFooter="true"
           idField="id" treeField="region">
        <thead frozen="true">
            <tr>
                <th field="region" width="150">Region</th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th colspan="4">2009</th>
                <th colspan="4">2010</th>
            </tr>
            <tr>
                <th field="f1" width="50" align="right">1st qrt.</th>
                <th field="f2" width="50" align="right">2st qrt.</th>
                <th field="f3" width="50" align="right">3st qrt.</th>
                <th field="f4" width="50" align="right">4st qrt.</th>
                <th field="f5" width="50" align="right">1st qrt.</th>
                <th field="f6" width="50" align="right">2st qrt.</th>
                <th field="f7" width="50" align="right">3st qrt.</th>
                <th field="f8" width="50" align="right">4st qrt.</th>
            </tr>
        </thead>
    </table>
    <script>
        $(function () {
            $.getJSON('/json/treegrid2_data.json', function (data) {
                $('#tt3').treegrid({
                    data: data
                });
            });
        });
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>树形网格动态加载</p>
    <table title="Products" class="easyui-treegrid" style="width:700px;height:300px"
           url="/menu/list2?id=1"
           rownumbers="true"
           idField="id" treeField="name">
        <thead>
            <tr>
                <th field="name" width="250">Name</th>
            </tr>
        </thead>
    </table>
    <script>
        function formatDollar(value) {
            if (value) {
                return '$' + value;
            } else {
                return '';
            }
        }
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>树形网格惰性加载节点</p>
    <table id="tt4" style="width:600px;height:400px"></table>
    <script>
        $(function () {
            $('#tt4').treegrid({
                url: '/menu/list2?id=1',
                idField: 'id',
                treeField: 'name',
                loadFilter: function (data) {
                    return data;
                },
                columns: [
                    [
                        {title: 'name', field: 'name', width: 180},
                        {field: 'title', title: 'title', width: 60, align: 'right'},
                        {field: 'remark', title: 'remark', width: 80}
                    ]
                ],
                onBeforeExpand: function (row) {
                    if ("closed" == row.state && !row.children) {
                        return false;
                    }
                },
                onClickRow: function (row) {
                    if ("closed" == row.state && !row.children) {
                        $.ajax({
                            url: "/menu/list2",
                            data: {
                                "id": row.id
                            },
                            dataType: 'json',
                            success: function (data) {
                                var rows = data[0].children;
                                if (rows && rows.length > 0) {
                                    $('#tt4').treegrid("append", {
                                        parent: row.id,
                                        data: rows
                                    });
                                    row.state = 'open';
                                } else {
                                    row.state = 'open';
                                }
                                $('#tt4').treegrid("refresh", row.id);
                            }
                        });
                    }
                }
            });
        });
    </script>

</body>
</html>